<template>
  <div class="image-button" href="#">
    <img v-el:focusable-el class="image-button-img" :src="imagePath" :width="imageWidth" :height="imageHeight" />
  </div>
</template>

<script type="text/babel">
  import FocusableView from './FocusableView'
  import AssetComponent from './AssetComponent'
  import { Asset } from '../../libs/AssetsManager'
  import $ from 'jquery'
  import TWEEN from 'tween.js'
  import '../../../static/js/RequestAnimationFrame.js'
  import Utils from '../../libs/Utils'

  var animate = function (time) {
    window.requestAnimationFrame(animate)
    TWEEN.update(time)
  }
  animate()

  export default {
    mixins: [ FocusableView, AssetComponent ],
    data () {
      return {
        imagePath: '',
        animating: false
      }
    },
    props: {
      asset: {
        type: Asset
      },
      imageSrc: {
        type: String
      },
      imageWidth: {
        type: Number
      },
      imageHeight: {
        type: Number
      }
    },
    ready: function () {
      this.imagePath = this.getImagePath()
      $(this.$el).focus()
    },
    methods: {
      getImagePath: function () {
        if (this.asset) {
          return this.asset.currentState()
        }
        return this.imageSrc
      },
      onAssetStateChanged: function (asset, currentState) {
        this.imagePath = this.getImagePath()
      },
      createMaskElement: function () {
        return $('<img src="' + this.getImagePath() + '" width="' + this.imageWidth + '" height="' + this.imageHeight + '"/>').get(0)
      },
      onFocusView: function (element, done) {
        var self = this
        var src = {
          scale: 1.0
        }
        var dest = {
          scale: 1.5
        }
        var offset = $(element).offset()
        var width = self.imageWidth
        var height = self.imageHeight
        var t = new TWEEN.Tween(src)
        t.to(dest, 200)
        .onStart(function () {
          self.animating = {
            animation: t,
            scale: 1
          }
        })
        .onUpdate(function () {
          var currScale = this.scale
          self.animating.scale = currScale
          $(element).attr({
            width: parseInt(width * currScale) + 'px',
            height: parseInt(height * currScale) + 'px'
          }).css({
            top: parseInt(offset.top - (height * (currScale - 1)) / 2) + 'px',
            left: parseInt(offset.left - (width * (currScale - 1)) / 2) + 'px'
          })
        })
        .onComplete(function () {
          self.animating = false
          if (Utils.isFunction(done)) {
            done.call(self)
          }
        })
        t.start()
      },
      onBlurView: function (element, done) {
        var self = this
        var src = {
          scale: 1.5
        }
        if (self.animating) {
          self.animating.animation.stop()
          src.scale = self.animating.scale
        }
        var t = new TWEEN.Tween(src)
        var width = self.imageWidth
        var height = self.imageHeight
        var offset = $(self.focusableElement()).offset()
        t.to({ scale: 1 }, 200)
        .onStart(function () {
          self.animating = {
            animation: t,
            scale: 1.5
          }
        })
        .onUpdate(function () {
          var currScale = this.scale
          self.animating.scale = currScale
          $(element).attr({
            width: parseInt(width * currScale) + 'px',
            height: parseInt(height * currScale) + 'px'
          }).css({
            top: parseInt(offset.top - (height * (currScale - 1)) / 2) + 'px',
            left: parseInt(offset.left - (width * (currScale - 1)) / 2) + 'px'
          })
        })
        .onComplete(function () {
          self.animating = false
          if (Utils.isFunction(done)) {
            done.call(self)
          }
        })
        t.start()
      }
    }
  }
</script>